﻿@using DevExpress.Blazor
@inject EmployeeService EmployeeService

<div class="demo-description" id="TabPage">
    <h2><DemoNavLink Link="Tabs#TabPage" />Tabs - Tab Pages<span class="demo-badge badge badge-success">New</span></h2>
    <p>
        Use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTabPage">DxTabPage</a> class to create tab pages within the DxTabs component.
    </p>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-body demo-tab">
        @if (Employees == null)
        {
            <p><em>Loading...</em></p>
        }
        else
        {
            <DxTabs>
                @foreach (var employee in Employees)
                {
                    <DxTabPage Text="@(employee.FirstName + ' ' +  employee.LastName)">
                        <div class="media demo-tab-page-content">
                            <img src="@(StaticAssetUtils.GetImagePath($"Employees/{employee.FileName}.png"))" width="125" />
                            <div class="media-body pl-3">
                                <h5 class="mt-0">@employee.Title @employee.FirstName @employee.LastName</h5>
                                <p><b>Birthday:</b> @employee.BirthDate.ToShortDateString()</p>
                                <p>@employee.Notes</p>
                            </div>
                        </div>
                    </DxTabPage>
                }
            </DxTabs>
        }

    </div>
</div>
<CodeSnippet_Tabs_TabPage></CodeSnippet_Tabs_TabPage>

@code {
    IEnumerable<Employee> Employees;

    protected override async Task OnInitializedAsync()
    {
        Employees = (await EmployeeService.Load()).Skip(5).Take(3);
    }
}
